<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>商品列表</title>


  <link rel="stylesheet" href="./lib/fontawesome/css/font-awesome.min.css">
  <link rel="stylesheet" href="./lib/mui/css/mui.min.css">
  <link rel="stylesheet" href="./css/common.css">
  <link rel="stylesheet" href="./css/detail.css">

</head>
<body>
  
  <!-- header -->
  @@include('nav_back.html', {"title":"详情"}) 
  <!-- <header class="header mui-bar mui-bar-nav">
    <h1 class="mui-title">导航栏</h1>
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
    <a class="mui-icon mui-icon-bars mui-pull-right"></a>
  </header> -->

  <!-- 页面 -->
  <div class="pyg_view"></div>


  <!-- footer -->
  <footer class="footer">
    <a class="contact" href="javascript:;">
      <span class="fa fa-weixin"></span>
      <span>客服</span>
    </a>
    <a class="contact" href="javascript:;">
      <span class="fa fa-phone"></span>
      <span>客服</span>
    </a>
    <a class="add_cart" href="javascript:;">加入购物车</a>
    <a class="buy_now" href="javascript:;">立即购买</a>
  </footer>


  <!-- footer -->
  <!-- @@include('footer.html', {"index":"1"}) -->


</body>

<script src="./lib/mui/js/mui.min.js"></script>
<script src="./lib/zepto/zepto.js"></script>
<script src="./lib/arttemplate/template-web.js"></script>
<script src="./js/common.js"></script>
<script src="./js/detail.js"></script>


</html>


<!-- 详情页模板 -->
<script type="text/html" id="detailTpl">
  
  <!-- 轮播图 -->
  <div class="mui-slider">
      
    <div class="mui-slider-group mui-slider-loop">
      <!--支持循环，需要重复图片节点-->
      <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{pics[pics.length-1].pics_big}}" /></a></div>
      {{each pics item index}}
      <div class="mui-slider-item"><a href="#"><img src="{{item.pics_big}}" /></a></div>
      {{/each}}
      <!--支持循环，需要重复图片节点-->
      <div class="mui-slider-item mui-slider-item-duplicate"><a href="#"><img src="{{pics[0].pics_big}}" /></a></div>
    </div>

    <!-- 指示器 -->
    <div class="mui-slider-indicator">
      {{each pics item idx}}
      <div class="mui-indicator {{idx===0?'mui-active':''}}"></div>
      {{/each}}
    </div>
  </div>

  <!-- 商品名称信息 -->
  <div class="goods_info">
    <div class="goods_name">{{goods_name}}</div>
    <div class="goods_price">￥{{goods_price}}</div>
  </div>

  <!-- 商品货运信息 -->
  <div class="freight">
    <div class="freight_title">货运信息</div>
    <ul class="freight_content">
      <li><span>已选</span><span>白色</span></li>
      <li><span>促销</span><span>是</span></li>
      <li><span>送至</span><span>上海市</span></li>
      <li><span>运费</span><span>免运费</span></li>
    </ul>
  </div>

  <!-- 参数详情 -->
  <div class="goods_details">
    <!-- tab_bar -->
    <div class="tab_bar">
      <div class="mui-segmented-control mui-segmented-control-negative">
        <a class="mui-control-item mui-active" href="#item1">图文详情</a>
        <a class="mui-control-item" href="#item2">规格参数</a>
      </div>
        
    </div>

    <!-- tab_content -->
    <div class="tab_content">
      <div id="item1" class="mui-control-content mui-active">
        {{@ goods_introduce}}
      </div>
    
      <div id="item2" class="mui-control-content params">
        {{each attrs item index}}

        <div class="params_title">
          <span>{{item.attr_name.split('-')[0]}}</span>
        </div>
        <div class="params_content">
          <span class="attr_name">{{item.attr_name.split('-')[1]}}</span>
          <span class="attr_value">{{item.attr_value}}</span>
        </div>
            
        {{/each}}
        </div>
				
			</div>



  </div>



</script>